<template>
  <p>count = {{ count }}</p>
  <p>
    <button @click="handleCount">点击+1</button>
  </p>

  <p>userInfo = {{ userInfo }}</p>
  <p>
    <button @click="handleUserInfo">修改信息</button>
    <button @click="handleDeepUserInfo">修改工作信息</button>
  </p>
</template>

<script>
import {ref, reactive, watchEffect} from 'vue'

export default {
  name: "Demo",
  setup() {
    const count = ref(0)

    const userInfo = reactive({
      name: '细孔放',
      age: 10,
      job: {
        work1: {
          name: '咳咳'
        }
      }
    })

    const handleCount = () => {
      count.value += 1
    }

    const handleUserInfo = () => {
      userInfo.name += '*'
      userInfo.age += 1
    }

    const handleDeepUserInfo = () => {
      userInfo.job.work1.name += '/'
    }

    // watch hooks，依赖数据变化，走监听
    watchEffect(() => {
      userInfo.name = '监控'
      console.log("watch hooks userInfo = ", userInfo);
    })
    watchEffect(() => {
      handleUserInfo()
      console.log("watch hooks userInfo = ", count);
    })
    watchEffect(() => {
      handleDeepUserInfo()
      console.log("watch hooks deep userInfo = ", count);
    })

    return {
      count,
      handleCount,
      userInfo,
      handleUserInfo,
      handleDeepUserInfo
    }
  }
}
</script>

<style scoped>

</style>